<template>
  <!-- 
    可以使用外部div包裹住，一定要设置box高度小于内部循环数据高度，这样才能产生滚动
    在父组件定义两个方法，可以把最下面的两个移动过去
    <div class="box">
      <ScrollBox :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd">
        自定义内容
      </ScrollBox>
    </div> 
  -->
  <div class="wrapper" ref="upload">
    <slot></slot>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  name:'Scroller',
  props:{
    handleToScroll:{
      type: Function,
      default:function(){}
    },
    handleToTouchEnd:{
      type: Function,
      default: function(){}
    }
  },
  mounted(){
    this.$nextTick(() => {
      this._initScroll()
    })
  },
  methods:{
    _initScroll(){
      let scroll = new BScroll( this.$refs.upload,{
        tap: true,
        probeType:1
      })
      scroll.on('scroll', (pos) => {
        this.handleToScroll(pos)
      })
      scroll.on('touchEnd', (pos) => {
        this.handleToTouchEnd(scroll, pos)
      })
    },
    //父组件设置

    handleToScroll(pos){
      if(pos.y > 30){
        this.pullDownMsg = '正在更新中'
      }
    },
    handleToTouchEnd(scroll, pos){
      //下拉刷新
      if(pos.y > 30){
        this.getFootList()
      }
      //上拉加载 总高度>下拉的高度+10 触发加载更多
      if(scroll.maxScrollY>pos.y+10){
          console.log("加载更多")
          //使用refresh 方法 来更新scroll  解决无法滚动的问题
          // scroll.refresh()会刷新滚动回到顶部
        //this.getFootList()
      }
      console.log(this.scroll.maxScrollY+"总距离----下拉的距离"+pos.y)
    },
    async getFootList(){
      let page = this.page++
      const res = await reqFootprint({page,limit:10})
      if(res.status === 200){
        //文本显示内容位置自定义
        this.pullDownMsg = '更新成功'
        setTimeout(() => {
          this.footList = res.response;
          this.pullDownMsg = ''
        }, 1000)
      }
    }
  }
}
</script>
<style lang='less' scoped>
.wrapper{
  height: 100%;
}
</style>